<template>
    <div  id="login" >
        <div>

            <el-row  id="row" type="flex" justify="center" align="middle" >
                <el-col :xs="17" :sm="13" :md="9" :lg="6" :xl="5">
                    <div class="logo-login">
                        珊瑚科技电商后台管理系统
                    </div>
                    <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" class="demo-dynamic">
                        <el-form-item
                                v-for="(item,prop) in loginForm"
                                :prop="prop">
                            <el-input v-model="loginForm[prop]"  :type="prop === 'password'?'password':'text'">
                                <i slot="suffix" :class="'icon-'+prop" style="color: #030303"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="width: 100%" type="success" @click="login" round>{{$t('common.login')}}</el-button>

                        </el-form-item>
                    </el-form>
                </el-col>

            </el-row>
        </div>
    </div>
</template>

<script>
    import config from './login.js'
    import {setStore} from "../../utils/storage";
    import bus from '../../utils/bus'
    import {sider as siderLists } from '../../router/config'
    import {permission} from "../../config";

    export default {
        name: "login",
        created() {
            this.createScript('https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js', this.initCSSBG)
        },
        data() {
            let _this = this
            return {
                loginForm:{
                    user:'',
                    password:'',
                },
                loginFormLabel:{
                    user:_this.$t('common.account'),
                    password:_this.$t('common.password'),
                },
                siderList:siderLists,
                origSider:JSON.parse(JSON.stringify(siderLists)),
                loginFormRules:{
                    user:[{ required: true, message: _this.$t('common.accountTip'), trigger: 'blur' }],
                    password:[{ required: true, message: _this.$t('common.passwordTip'), trigger: 'blur' }],
                }
            }
        },
        methods: {
            initCSSBG() {
                particlesJS('login', config)
            },
            login(){
                if(!this.validateCheck('loginForm')) return;
                let params = {
                    user:this.loginForm.user,
                    password:this.loginForm.password,
                }
                this.$loginpost(params).then(response =>{
                    if(response.code && response.code ===  'success'){
                        setStore('user',params.user)
                        this.$store.commit('clearOpenPage')
                        this.$store.commit('saveUserInfo',response.data)
                        bus.$emit('login',true)
                        this.checkoutPermission()
                    }else{
                        this.$message.error(this.$t('message.loginErr'))
                    }
                })
            },
            checkoutPermission(){
                let ignore = ["login"]
                let userType = window.localStorage.getItem('userType')
                if(userType !== '0' && !userType){

                }else{
                    this.showSider(userType)
                }
            },
            showSider(userType){
                let prohibition = permission.userType[userType].prohibition
                let first = ''
                this.siderList.forEach((v,k)=>{
                    if(prohibition.includes(v.name)){

                    }else {
                        v.children && v.children.forEach((cv,ck)=>{

                            if(prohibition.includes(cv.name)){

                            }else{
                                if(!first){
                                    first=cv.path
                                }
                            }
                        })
                    }
                })
                this.$router.push(first)
            },
            validateCheck(ref){
                let value = false;
                this.$refs[ref].validate((v)=>{value =  v})
                return value
            }
        }
    }
</script>

<style lang="less" scoped>
    #login {
        width: 100%;
        height: 100vh;
        position: relative;
        background-color: #000;
        overflow: hidden;
    }

    #row{
        height: 100vh;
        position: absolute;
        width: 100vw;
    }
    .logo-login{
        text-align: center;
        padding-bottom: 20px;
        color: darkgray;
        font-size: 24px;
        font-family: cursive;
    }
</style>